<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-if="false"></van-cell>
      <van-cell v-for="item in goodsList" :key="item.id" @click="goodsDatail(item.id)">
        <div class="image">
          <img :src="item.img_url" />
        </div>
        <p>{{item.title}}</p>
        <div class="bottom_box">
          <div class="pice">
            <span>￥{{item.sell_price}}</span>
            <s>￥{{item.market_price}}</s>
          </div>
          <div class="num">
            <span>热卖中</span>
            <span>剩{{item.stock_quantity}}件</span>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      goodsList: [],
      i: 0
    }
  },
  created() {},
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get(
        `/api/getgoods?pageindex=${this.i}`
      )
      if (res.status !== 0) {
        return this.$toast.fail("获取商品失败!")
      }
      this.goodsList.push(...res.message)
    },

    onLoad() {
      this.i++
      this.getGoodsList()
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.i >= 3) {
        this.finished = true
      }
    },
    goodsDatail(id) {
      this.$router.push(`/goods/detail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 5px 10px;
  .van-cell {
    width: 48%;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 0;
    align-content: space-between;
    .image {
      padding: 10px;
      min-height: 180px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    p {
      font-size: 14px;
      color: #000;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: 2;
      padding: 4px 10px;
      height: 49px;
    }
    .bottom_box {
      width: 100%;
      background: #eee;
      padding: 5px 0;
      .pice {
        text-align: left;
        padding: 0 10px;
        span {
          font-size: 16px;
          color: red;
          margin-right: 15px;
        }
      }
      .num {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 0 10px;
      }
    }
  }
}
</style>
